feat(frontend): ultra-dark page tint + mobile-friendly inbound view

- Drop --bg-page from #21242a (lighter than the cards) to #050505 in
  ultra-dark across index/sub/settings/inbounds/xray, so cards
  consistently elevate over the page
- Hide the inline sider's children + collapse-trigger and zero its
  width below 768px; the floating drawer-handle remains the menu
  trigger
- Inbounds page mobile pass: tighten content-area + card padding;
  flex-wrap the filter bar instead of stacking; shrink table cell
  padding so all 4 mobile columns fit; bump expand / action / info
  icon hit targets
- Per-client expand row on mobile: soft-tinted rounded cards instead
  of hairline borders, larger action / info touch targets, more
  legible email typography, bigger status badge dot

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

frontend/src/components/AppSidebar.vue

@@ -164,5 +164,20 @@ function closeDrawer() {
   .drawer-handle {
     display: inline-flex;
   }
+
+  /* On mobile the drawer is the menu — hide the inline sider's content
+   * + the collapse trigger so the sider stops taking layout space and
+   * leaves no remnant button next to the page. */
+  .ant-sidebar > .ant-layout-sider :deep(.ant-layout-sider-children),
+  .ant-sidebar > .ant-layout-sider :deep(.ant-layout-sider-trigger) {
+    display: none;
+  }
+
+  .ant-sidebar > .ant-layout-sider {
+    flex: 0 0 0 !important;
+    max-width: 0 !important;
+    min-width: 0 !important;
+    width: 0 !important;
+  }
 }
 </style>

frontend/src/pages/inbounds/ClientRowTable.vue

@@ -556,4 +556,55 @@ function rowKey(client) {
 :deep(.ant-table-expanded-row > .ant-table-cell) {
   padding: 0 !important;
 }
+
+/* ===== Mobile polish ===============================================
+ * On phones the row collapses to [actions][client][info]. Give those
+ * cells room and bump the touch targets so the per-client action
+ * dropdown + info popover are easier to hit with a thumb. */
+@media (max-width: 768px) {
+  .client-list.is-mobile .client-row {
+    grid-template-columns: 40px minmax(0, 1fr) 40px;
+    gap: 8px;
+    padding: 10px 10px;
+  }
+
+  .client-list.is-mobile .row-icon {
+    font-size: 20px;
+    padding: 6px;
+  }
+
+  .client-list.is-mobile .cell-mobile-info .ant-btn {
+    width: 32px;
+    height: 32px;
+  }
+
+  /* Make the email more readable; the comment can stay smaller. */
+  .client-list.is-mobile .client-email {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .client-list.is-mobile .client-comment {
+    font-size: 11px;
+  }
+
+  /* Bigger status badge so depleted/online state is visible at a glance. */
+  .client-list.is-mobile .cell-client :deep(.ant-badge-status-dot) {
+    width: 9px;
+    height: 9px;
+  }
+
+  /* Row separators feel cleaner with a slight surface tint per row
+   * — easier to scan than a hairline border on dark backgrounds. */
+  .client-list.is-mobile .client-row:not(.client-list-header) {
+    background: rgba(128, 128, 128, 0.04);
+    border-radius: 8px;
+    margin: 4px 8px;
+    border: none !important;
+  }
+
+  .client-list.is-mobile .client-row:not(.client-list-header):last-child {
+    border: none !important;
+  }
+}
 </style>

frontend/src/pages/inbounds/InboundList.vue

@@ -602,4 +602,57 @@ function showQrCodeMenu(dbInbound) {
 :deep(.ant-table-tbody > tr:last-child > *:last-child) {
   border-end-end-radius: 8px;
 }
+
+/* ===== Mobile-tightening ============================================
+ * Below 768px the inbound list is on a tiny viewport — squeeze the
+ * card chrome and table cell padding so the actual rows have room. */
+@media (max-width: 768px) {
+  /* Card header/body breathe less on mobile */
+  :deep(.ant-card-head) {
+    padding: 0 12px;
+    min-height: 44px;
+  }
+
+  :deep(.ant-card-head-title),
+  :deep(.ant-card-extra) {
+    padding: 8px 0;
+  }
+
+  :deep(.ant-card-body) {
+    padding: 8px;
+  }
+
+  /* Filter bar wraps cleanly without forcing block layout (which made
+   * the input + radio group stack on separate full-width lines). */
+  .filter-bar.mobile {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .filter-bar.mobile > * {
+    margin-bottom: 0;
+  }
+
+  /* Tighten table cell padding so the 3 visible columns get room. */
+  :deep(.ant-table-thead > tr > th),
+  :deep(.ant-table-tbody > tr > td) {
+    padding: 8px 6px;
+    font-size: 12px;
+  }
+
+  /* Slightly bigger expand chevron (touch target). */
+  :deep(.ant-table-row-expand-icon) {
+    width: 20px;
+    height: 20px;
+    line-height: 18px;
+  }
+
+  /* The action / info icons are the row's primary touch targets. */
+  .row-action-trigger,
+  .row-info-trigger {
+    font-size: 22px;
+    padding: 4px;
+  }
+}
 </style>

frontend/src/pages/inbounds/InboundsPage.vue

@@ -623,7 +623,7 @@ function onRowAction({ key, dbInbound }) {
 }
 
 .inbounds-page.is-dark.is-ultra {
-  --bg-page: #21242a;
+  --bg-page: #050505;
   --bg-card: #0c0e12;
 }
 
@@ -640,6 +640,12 @@ function onRowAction({ key, dbInbound }) {
   padding: 24px;
 }
 
+@media (max-width: 768px) {
+  .content-area {
+    padding: 8px;
+  }
+}
+
 .loading-spacer {
   min-height: calc(100vh - 120px);
 }
@@ -647,4 +653,10 @@ function onRowAction({ key, dbInbound }) {
 .summary-card {
   padding: 16px;
 }
+
+@media (max-width: 768px) {
+  .summary-card {
+    padding: 8px;
+  }
+}
 </style>

frontend/src/pages/index/IndexPage.vue

@@ -332,7 +332,7 @@ async function openConfig() {
 }
 
 .index-page.is-dark.is-ultra {
-  --bg-page: #21242a;
+  --bg-page: #050505;
   --bg-card: #0c0e12;
 }
 

frontend/src/pages/settings/SettingsPage.vue

@@ -263,7 +263,7 @@ const alertVisible = ref(true);
 }
 
 .settings-page.is-dark.is-ultra {
-  --bg-page: #21242a;
+  --bg-page: #050505;
   --bg-card: #0c0e12;
 }
 

frontend/src/pages/sub/SubPage.vue

@@ -324,7 +324,7 @@ const _antdAlgorithm = antdTheme.darkAlgorithm;
   --bg-card: #151f31;
 }
 .subscription-page.is-dark.is-ultra {
-  --bg-page: #21242a;
+  --bg-page: #050505;
   --bg-card: #0c0e12;
 }
 .subscription-page :deep(.ant-layout),

frontend/src/pages/xray/XrayPage.vue

@@ -381,7 +381,7 @@ function confirmRestart() {
 }
 
 .xray-page.is-dark.is-ultra {
-  --bg-page: #21242a;
+  --bg-page: #050505;
   --bg-card: #0c0e12;
 }