<div class="space-y-8 max-w-md mx-auto py-4">
  <div class="space-y-2">
    <h1 class="text-3xl font-bold tracking-tight text-foreground">Mobile Web Layout (layout-mweb)</h1>
    <p class="text-sm text-muted-foreground leading-relaxed">
      Mobile-first structural layout with safe-area padding, sticky mobile top bar, and thumb-friendly touch targets.
    </p>
  </div>

  <!-- Mobile Shell Frame -->
  <div class="border-[6px] border-slate-800 rounded-[2.5rem] p-2 bg-slate-900 shadow-2xl max-w-sm mx-auto overflow-hidden">
    <div class="rounded-[2rem] bg-background border border-border h-[520px] flex flex-col overflow-hidden relative">
      <!-- Top Mobile Bar -->
      <div class="px-4 py-3 bg-muted/60 border-b border-border flex items-center justify-between sticky top-0 z-10 backdrop-blur">
        <div class="flex items-center gap-2">
          <div class="w-6 h-6 rounded-full bg-primary text-primary-foreground font-bold text-[10px] flex items-center justify-center">H</div>
          <span class="font-bold text-xs text-foreground">Mobile Portal</span>
        </div>
        <button class="w-7 h-7 rounded-full bg-background border border-border flex items-center justify-center text-xs">🔔</button>
      </div>

      <!-- Mobile Content Area -->
      <div class="flex-1 p-4 overflow-y-auto space-y-3">
        <div class="p-3 bg-card border border-border rounded-xl shadow-sm">
          <div class="text-[10px] text-muted-foreground font-semibold">Today's Revenue</div>
          <div class="text-lg font-bold text-foreground">$12,450.00</div>
        </div>

        <div class="space-y-2">
          <div class="text-xs font-semibold text-foreground">Recent Invoices</div>
          <div class="divide-y divide-border bg-card border border-border rounded-xl overflow-hidden">
            <div class="p-2.5 flex items-center justify-between text-xs">
              <div>
                <div class="font-medium text-foreground">Acme Corp</div>
                <div class="text-[10px] text-muted-foreground">INV-1002</div>
              </div>
              <span class="text-xs font-bold text-emerald-500">$1,200</span>
            </div>
            <div class="p-2.5 flex items-center justify-between text-xs">
              <div>
                <div class="font-medium text-foreground">Globex LLC</div>
                <div class="text-[10px] text-muted-foreground">INV-1003</div>
              </div>
              <span class="text-xs font-bold text-emerald-500">$3,450</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Floating Action Button -->
      <button class="absolute bottom-4 right-4 w-11 h-11 rounded-full bg-primary text-primary-foreground font-bold shadow-lg flex items-center justify-center text-lg hover:scale-105 transition-transform">+</button>
    </div>
  </div>
</div>