feat: video letterboxing, card badge styling, component updates

- Add object-fit: contain + black background for video in DTMediaFrame
- Style .dt-card-badge with mode-colored background, padding, and
  bevel-aware positioning (negative right offset for clean diagonal clip)
- Restore DTStaggerContainer in react-native (was incorrectly deleted)
- Update DTGallery, DTModal, DTMobileFilterOverlay, DTMediaFrame components
- Refresh showcase pages for desktop and mobile

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

packages/web/src/components/bevels.css

@@ -585,8 +585,20 @@
 .dt-bevel-card > .dt-card-badge {
   position: absolute;
   bottom: calc(var(--bevel-md) * 0.25);
-  right: calc(var(--bevel-md) * 0.25);
+  right: calc(var(--bevel-md) * -0.15);
   z-index: 4;
+  background: var(--dt-card-color, var(--color-primary));
+  color: var(--color-bg);
+  padding: 0.35em 2em 0.35em 1em;
+  font-size: 0.85rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+[data-brand="classic"] .card > .dt-card-badge,
+[data-brand="classic"] .dt-bevel-card > .dt-card-badge {
+  border-radius: 0.375rem;
 }
 
 /* ============================================================================

packages/web/src/components/forms-dt.css

@@ -251,7 +251,6 @@
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
-  text-transform: uppercase;
   font-weight: 600;
   font-size: 0.875rem;
   letter-spacing: 0.05em;
@@ -351,7 +350,6 @@
   font-weight: 600;
   font-size: 0.875rem;
   letter-spacing: 0.05em;
-  text-transform: uppercase;
   cursor: pointer;
   transition: all var(--transition-fast);
 }
@@ -420,7 +418,6 @@
   border-top: 5px solid var(--color-primary);
   border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.2);
   font-weight: 600;
-  text-transform: uppercase;
   letter-spacing: 0.05em;
   cursor: pointer;
 }